<template>
    <div class="Blog_information">
        <article class="blog_list" v-for="(blog_basic,i) in blogList">
            <header class="blog_header">
                <h2 class="blog_title"><a href="/show">{{blog_basic.title}}</a></h2>
                <div class="blog_publish_time">
                    <time :datetime=blog_basic.publish_time>{{blog_basic.publish_time}}</time>
                </div>
            </header>
            <div class="blog_content">
                <div class="blog_Introduction">
                    <p>{{blog_basic.introduction}}</p>
                </div>
                <div class="browse_like_message">
                    <a href="" :title=browse>
                        <el-icon class="el-icon-view"></el-icon>
                        {{blog_basic.browse}}</a>
                    <a href="" :title=like>
                        <el-icon class="el-icon-medal-1"></el-icon>
                        {{blog_basic.like}}</a>
                    <a href="" :title=message>
                        <el-icon class="el-icon-chat-dot-round"></el-icon>
                        {{blog_basic.message}}</a>
                </div>
                <div class="read_more">
                    <a href="">READ MORE</a>
                </div>
            </div>
        </article>
        <more-blog :blog-count=blogCount></more-blog>
    </div>
</template>
<script>
    import MoreBlog from "../common/MoreBlog";
    export default {
        name: "BlogList",
        components: {MoreBlog},
        data() {
            return {
                browse: '浏览',
                like: '点赞',
                message: '留言',
                blogCount: 50,
                blogList: [
                    {
                        title: '学习 Node.js 运行时——迷失在 npm 包的海洋之际',
                        publish_time: '2020-2-2',
                        introduction: '译序：本文指出了目前大部分人在学习 Node.js 过程的误区，点出了目前大部分 Node.js 学习者知识点中的缺陷。',
                        browse: '0',
                        like: '1',
                        message: '6'
                    },
                    {
                        title: '深入 ES6 面向对象',
                        time: '2020-10-2',
                        introduction: '通常我们需要在代码中表述一个想法或概念——一部汽车引擎、一个电脑文件、一个路由器甚至一个温度计的度数。使用代码直接描述这些概念通常分为两部分：「表示状态的数据」与「表示行为的函数」。「类」给我们一个捷径来表述我们想表示的对象的状态和行为。同时，还通过初始化函数确定执行、更方便的定义约定的操作数据与维护状态的函数等机制，使得我们的代码更可控。如果你觉得某些「事物」是一个独立的实体，那么是时候单独为这个「事物」定义一个「类」了\n' +
                            '\n' +
                            '看一段没有类的代码，有多少错误能肉眼判断出来？又如何修复这些错误？',
                        browse: '2',
                        like: '1112',
                        message: '0'
                    },
                    {
                        title: '利用 Prometheus 监控 NodeJS 应用',
                        time: '2020-11-1',
                        introduction: '「欢快的搭建好 Prometheus」之后，记录我们 nodejs 应用的指标就是一件更欢快的事了。\n' +
                            '\n' +
                            '脑洞主要是在应用中引入一个外部的 node 模块，这个模块提供了对 Prometheus 指标类型(metric types)的支持。本文中用到的是 Counter 和 Gauge 。这个模块通过一个轻量的 express 服务暴露统计数据，以便 Prometheus 来抓取。',
                        browse: '66',
                        like: '122',
                        message: '55'
                    }, {
                        title: '学习 Node.js 运行时——迷失在 npm 包的海洋之际',
                        publish_time: '2020-2-2',
                        introduction: '译序：本文指出了目前大部分人在学习 Node.js 过程的误区，点出了目前大部分 Node.js 学习者知识点中的缺陷。',
                        browse: '0',
                        like: '1',
                        message: '6'
                    }, {
                        title: '学习 Node.js 运行时——迷失在 npm 包的海洋之际',
                        publish_time: '2020-2-2',
                        introduction: '译序：本文指出了目前大部分人在学习 Node.js 过程的误区，点出了目前大部分 Node.js 学习者知识点中的缺陷。',
                        browse: '0',
                        like: '1',
                        message: '6'
                    },
                ]
            }
        }
    }
</script>
<style scoped>
    .Blog_information{
        overflow-x: hidden;
    }
    .blog_list {
        /*字体多余隐藏*/
        white-space: nowrap; text-overflow: ellipsis;
        padding: 54px 90px;
        margin-bottom: 30px;
        background-color: #ffffff;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }

    .blog_header {
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px LightGrey solid;
    }

    .blog_title {
        font-size: 28px;
        text-align: center;
        height: 90px;
        line-height: 90px;
    }

    .blog_publish_time {
        text-align: center;
    }

    .blog_content {
        word-wrap: break-word;
    }

    .blog_content .blog_Introduction {
        margin-bottom: 3em;
    }

    .blog_content {
        overflow: hidden;
    }

    .browse_like_message {
        float: left;
    }

    .browse_like_message a {
        padding: 0px 60px;
        margin: 10px;
    }

    .browse_like_message i {
        margin-right: 10px;
    }

    .read_more {
        float: right;
        font-size: 18px;
    }
</style>